<template>
  <view class="app-container guest-list-page">
    <view class="guest-list">
      <view class="guest-item" v-for="item in memberList" :key="item.id">
        <view class="guest-info">
          <view class="name">{{ item.memberName }}
            <view class="tag">
              <u-tag :text="memberTypeMapping[item.memberType]" plain size="mini" type="warning"></u-tag>
            </view>

          </view>
          <view class="phone">{{ item.memberPhone || ''}}</view>
          <view class="idcard">{{ item.idCard || ''}}</view>
        </view>
        <!--<p>行是否可编辑 {{item.rowCanEditable}}</p>-->
        <!--<p>当前角色是否可编辑 {{roleCanEditable}}</p>-->
        <view class="btns" @click="goto('/pages/manager/tenant/tenant-info?memberId=' + item.memberId)" v-if="roleCanEditable && item.rowCanEditable">
          <u-icon name="arrow-right"></u-icon>
        </view>
      </view>
    </view>
    <view class="footer" v-if="roleCanEditable">
      <view class="btn">
        <u-button :disabled="checkInStatus !== '1'" type="primary" color="#FF7947" shape="circle" @click="goto('/pages/manager/tenant/add-tenant')">
          新增同住人
        </u-button>
      </view>
    </view>
  </view>
</template>

<script>
import {memberList} from "@/api/manager/order";
import storage from "@/utils/storage";
import constant from "@/utils/constant";
import {goto} from "@/utils/common";

export default {
  data() {
    return {
      roleCanEditable: false,
      memberList: [],
      memberTypeMapping: {
        '1': '承租人',
        '2': '房管员',
        '3': '同住人'
      },
      checkInStatus: ''
    };
  },
  // created() {
  //   this.getList();
  // },
  onShow() {
    this.getList();
  },
  methods: {
    goto,
    getList() {
      const orderId = storage.get(constant.room).orderId;
      memberList(orderId).then(res => {
        this.checkInStatus = res.data.checkInStatus
        this.memberList = res.data.houseMemberList
        // 把承租人放在最上面
        this.memberList.sort((a, b) => {
          if (a.memberType === '1') {
            return -1
          } else if (b.memberType === '1') {
            return 1
          } else {
            return 0
          }
        })
        // 是否可编辑
        // 当前角色为承租人或者房管员才允许编辑成员信息
        this.roleCanEditable = res.data.lesseeStatus === '1' || res.data.houseManagerStatus === '2';
        // 当前item的角色是承租人/房管员，则不允许编辑
        this.memberList.forEach(item => {
          if (item.memberType === '1' || item.memberType === '2') {
            item.rowCanEditable = false;
          } else {
            item.rowCanEditable = true
          }
        })
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.guest-list-page {
  .guest-list {
    padding: 20rpx;
    padding-bottom: 100px;

    .guest-item {
      display: flex;
      align-items: center;
      padding: 40rpx 20rpx;
      border-radius: 20rpx;
      background-color: #fff;
      margin-bottom: 20rpx;

      .guest-info {
        flex: 1;
        padding-left: 20rpx;

        .name {
          font-size: 32rpx;
          font-weight: bold;
          color: #111;
          margin-bottom: 12rpx;
          display: flex;
          justify-items: center;

          .tag {
            display: inline-block;
            margin-left: 16rpx;
          }
        }

        .phone {
          font-size: 24rpx;
          margin-bottom: 8rpx;
          color: #666;
        }

        .idcard {
          font-size: 24rpx;
          margin-bottom: 8rpx;
          color: #666;
        }
      }

      .btns {
        width: 120rpx;
        padding: 20rpx;
        display: flex;
        justify-content: center;
        align-items: center;

        .btn {
          //padding: 10rpx 20rpx;
        }
      }
    }

  }

  .footer {
    position: fixed;
    left: 0;
    bottom: 0;
    padding: 20rpx 20rpx 0 20rpx;
    background-color: #fff;
    width: 100%;
    .btn {
      margin-bottom: calc(env(safe-area-inset-bottom) + 20rpx)
    }
  }

}

</style>